<template>
    <div class="detail_container">
        <div class="top">
            <div class="title">
                {{ detailStore.hospitalInfo.hospital?.hosname }}
            </div>
            <div class="grade">
                <el-icon color="lightcoral">
                    <StarFilled />
                </el-icon>
                <span>{{ detailStore.hospitalInfo.hospital?.param.hostypeString }}</span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <img :src="detailStore.hospitalInfo.hospital?.logoData ? `data:image/jpeg;base64,` + detailStore.hospitalInfo.hospital?.logoData : ''"
                    :alt="detailStore.hospitalInfo.hospital?.hosname" />
            </div>
            <div class="right">
                <div class="address">
                    <el-icon>
                        <LocationInformation />
                    </el-icon>
                    <span>具体地址:</span>
                    <span>{{ detailStore.hospitalInfo.hospital?.param.fullAddress }}</span>
                </div>
                <div class="road">
                    <el-icon>
                        <Guide />
                    </el-icon>
                    <span>规划路线:</span>
                    <span>{{ detailStore.hospitalInfo.hospital?.route }}</span>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="title">
                医院介绍
            </div>
            <div class="content">
                {{ detailStore.hospitalInfo.hospital?.intro }}
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { StarFilled, LocationInformation, Guide } from '@element-plus/icons-vue';
import useDetailStore from '@/store/modules/hospitalDetail';

let detailStore = useDetailStore()
</script>
<style scoped lang="scss">
.detail_container {
    .top {
        display: flex;
        align-items: center;
        margin-bottom: 32px;

        .title {
            font-size: 24px;
            margin-right: 16px;
        }

        .grade {
            display: flex;
            align-items: center;

            span {
                margin-left: 2px;
                color: lightcoral;
            }
        }
    }

    .content {
        display: flex;

        .left {
            margin-right: 16px;

            img {
                width: 100px;
                height: 100px;
                object-fit: cover;
                border-radius: 6px;
            }
        }

        .right {

            .road,
            .address {
                color: #7f7f7f;
                margin-bottom: 6px;
                font-size: 14px;
                display: flex;
                align-items: start;

                span:nth-child(3) {
                    color: lightcoral;
                }

                span:nth-child(2) {
                    white-space: nowrap;
                }

                .el-icon {
                    margin-right: 4px;
                }

            }
        }
    }

    .footer {
        margin-top: 16px;

        .title {
            font-weight: 500;
            margin-bottom: 10px;
        }

        .content {
            color: #7f7f7f;
            font-size: 14px;
            text-indent: 2em;
            line-height: 24px;
        }
    }
}

@media (max-width:1280px) {
    .content {
        .left {
            img {
                width: 80px !important;
                height: 80px !important;
            }
        }
    }
}

@media (max-width:768px) {
    .detail_container {
        .top {
            flex-direction: column;

            .title {
                font-size: 18px;
                margin: 0;
                margin-bottom: 8px;
            }

            .grade {
                font-size: 14px;
            }
        }

        .content {
            flex-direction: column;

            .left {
                margin: 0 0 16px !important;
                text-align: center !important;

                img {
                    width: 100px !important;
                    height: 100px !important;
                }
            }
        }

        .footer {
            .content {
                line-height: 18px;
            }
        }
    }
}
</style>
  